<template>
  <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  num: {
    type: Number,
    default: 0,
  },
  type: {
    type: Number,
    default: 0,
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const lineDataList = ref<any>([]);
const xAxisData = ref();
const yAxisData = ref();
const lineData = ref();
const pieData = ref();
const num = ref();
const type = ref();
const countValueNum = ref();

pieData.value = props.housingSupplyStatsData.leftEntity.pieData;
let countValue = 0;
pieData.value.forEach((item: any) => {
  countValue += Number(item.number);
});
countValueNum.value = countValue;

const color = props.housingSupplyStatsData.leftEntity.color;
xAxisData.value = props.housingSupplyStatsData.rightEntity.xAxisData;
yAxisData.value = props.housingSupplyStatsData.rightEntity.yAxisData;
lineData.value = props.housingSupplyStatsData.rightEntity.seriesData;
num.value = props.num;
type.value = props.type ? props.type : 0;
lineData.value.forEach((item: any) => {
  lineDataList.value.push({
    name: item.name,
    type: "line",
    data: item.numbers,
    symbolSize: pxToRem(14),
    symbol: "none",
    smooth: true,
  });
});

// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      color: color,
      legend: {
        icon: "rect",
        left: pxToRem(0),
        top: pxToRem(0),
        itemWidth: pxToRem(16),
        itemHeight: pxToRem(11),
        itemGap: pxToRem(8),
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(12),
          rich: {},
          padding: [0, 0, pxToRem(-3), 0],
        },
      },
      tooltip: {
        trigger: "item",
        formatter: function (params: any) {
          return params.seriesName + "<br>" + params.name + "：" + params.value + " " + "(" + params.percent + "%)";
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      title: [
        {
          left: "24.1%",
          top: type.value != 1 ? "45%" : "51%",
          width: pxToRem(38.5), // 设置一个固定宽度
          height: pxToRem(38.5), // 设置一个固定高度
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          textAlign: "center",
          text: "{a|" + countValueNum.value + "}",
          textStyle: {
            rich: {
              a: {
                fontSize: pxToRem(22),
                color: "#FFFFFF",
                lineHeight: pxToRem(35), // 调整行高
              },
            },
          },
          subtext: "市场化商品房",
          subtextStyle: {
            fontSize: pxToRem(12),
            color: "#FFFFFF",
          },
          offset: [0, 0], // 调整标题位置
        },
      ],
      grid: {
        left: "50%",
        right: pxToRem(12),
        bottom: "7%",
        top: "30%",
        containLabel: true,
      },
      xAxis: {
        boundaryGap: true,
        data: xAxisData.value,
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
            fontSize: pxToRem(12),
          },
        },
      },
      yAxis: yAxisData.value.map((item: any) => ({
        type: "value",
        name: item,
        nameTextStyle: {
          color: "#959699",
          fontSize: pxToRem(12),
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#31679C",
            type: "dashed",
          },
        },
        axisLabel: {
          formatter: "{value}",
          color: "#959699",
          fontSize: pxToRem(12),
        },
      })),
      series: lineDataList.value.concat([
        {
          name: num.value == 1 ? "房屋性质" : num.value == 2 ? "房屋权利限制" : "产权结构",
          type: "pie",
          radius: ["43%", "70%"],
          center: ["25%", "58%"],
          data: pieData.value.map((item: any) => ({ name: item.property, value: item.number })),
          label: {
            normal: {
              show: false,
            },
          },
        },
        {
          type: "pie",
          color: ["#1D2E42"],
          radius: ["0%", "43%"],
          center: ["25%", "58%"],
          data: [
            {
              value: 10,
              name: "",
            },
          ],
          label: {
            normal: {
              show: false,
            },
          },
          silent: true,
          itemStyle: {
            normal: {
              color: "#1D2E42",
              borderColor: "#031834",
              borderWidth: pxToRem(3),
            },
          },
        },
        {
          type: "pie",
          radius: ["0%", "36%"],
          center: ["25%", "58%"],
          data: [
            {
              value: 10,
              name: "",
            },
          ],
          label: {
            normal: {
              show: false,
            },
          },
          silent: true,
          itemStyle: {
            normal: {
              color: "#1D2E42",
              borderColor: "#031834",
              borderWidth: pxToRem(2),
            },
          },
        },
      ]),
    };

    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  lineDataList.value = [];
  pieData.value = props.housingSupplyStatsData.leftEntity.pieData;
  xAxisData.value = props.housingSupplyStatsData.rightEntity.xAxisData;
  yAxisData.value = props.housingSupplyStatsData.rightEntity.yAxisData;
  lineData.value = props.housingSupplyStatsData.rightEntity.seriesData;
  num.value = props.num;
  let countValue = 0;
  pieData.value.forEach((item: any) => {
    countValue += Number(item.number);
  });
  lineData.value.forEach((item: any) => {
    lineDataList.value.push({
      name: item.name,
      type: "line",
      data: item.numbers,
      symbolSize: pxToRem(14),
      symbol: "none",
      smooth: true,
    });
  });

  countValueNum.value = countValue;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
